<template>
  <el-dialog title="上传文件" :visible.sync="dialogVisible" class="eveidenceform-dialog">
    <el-form ref="form" :model="form" label-width="80px" size="small">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item prop="filetype" label="文件类别">
            <el-select v-model="filetype" placeholder="请选择" @change="changefiletype">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="请选择文书" prop="lawbook" v-show="this.filetype==3">
            <el-select v-model="lawbook" placeholder="请选择">
              <el-option
                v-for="item in lawbooklist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24" class="file-upload-panel">
          <el-upload
            class="upload-demo"
            drag
            ref="upload"
            action="/api/case/evidence/upload"
            :file-list="fileList"
            :on-change="fileChange"
            :auto-upload="false"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
          <div v-if="!fileList.length" class="flle-empty">请上传文件</div>
        </el-col>
      </el-row>
      <el-form-item class="from-bnts">
        <el-button type="primary" @click="submitdata">保存</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
  import userApi from "@/api/system/user";
  import deptApi from "@/api/system/dept";
  import roleApi from "@/api/system/role";
  import caseApi from "@/api/system/case";
  import docApi from "@/api/system/doc";
  import utils from "@/assets/utils/zhzf-util";

  export default {
    name: "userEditForm",
    data() {
      return {
        loading: false,
        dialogVisible: false,
        lawbookshow: false,
        form: {},
        fileList: [],
        formData: null,
        options: [{id: "1", label: "文件"}, {id: "2", label: "图片"}, {id: "3", label: "文书"}],
        filetype: "1",
        lawbooklist: [],
        lawbook: ""
      };
    },
    methods: {
      async initPage(detail) {
        this.form = detail;
        this.dialogVisible = true;
        this.initdata();
      },
      initdata() {
        this.filetype = "1";
        this.lawbook = ''
        this.fileList = [];
      },
      async changefiletype() {
        if (this.filetype == "3") {
          //获取文书列表
          let res = await docApi.getAll({});
          this.lawbooklist = res.data;
          this.$forceUpdate();
        }
      },
      fileChange(file) {
        this.fileList.push(file);
      },
      async submitdata() {
        if (!this.form.caseAccessId) {
          let res = await caseApi.add(this.form);
          if (!res.ok) {
            utils.showTips("请先补齐案件基本信息", false);
            this.dialogVisible = false;
            return;
          }
          this.form = res.data;
        }
        let filelist = this.fileList;
        let formdata = new FormData();
        for (var i = 0; i < filelist.length; i++) {
          formdata.append("file", filelist[i].raw);
        }
        formdata.append("caseId", this.form.caseAccessId);
        if (this.lawbook) {
          formdata.append("docKey", this.lawbook);
        }
        let res = await caseApi.fileupload(formdata);
        if (res.ok) {
          this.$emit('upload',this.form);
          this.close();
        }
      },
      close() {
        this.$refs["form"].resetFields();
        this.dialogVisible = false;
      }
    }
  };
</script>
<style lang="scss">
  .eveidenceform-dialog {
    .el-dialog{
      .el-form {
        width: 500px;

        .el-form-item {
          .el-form-item__label {
            text-align: left;
            width: 100px !important;
          }

          .el-form-item__content {
            margin-left: 100px !important;
          }
        }

        .el-select,
        .el-input {
          width: 100%;

          .el-input__inner {
            height: 35px;
            line-height: 35px;
          }

          .el-input-group__append {
            padding: 0 20px;
          }

          .el-input__suffix {
            top: 0;
          }
        }
      }

      .file-upload-panel {
        position: relative;
        padding-bottom: 15px;

        .flle-empty {
          font-size: 30px;
          color: #ccc;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 60px;
        }

        .el-upload {
          width: 100%;
          border: 1px dashed #d9d9d9;

          .el-upload-dragger {
            width: 100%;
            border: none;
            width: 45%;
            border-right: 1px dashed #d9d9d9;

            .el-upload__text {
              color: #a5a5a5;
              font-size: 15px;
            }
          }
        }

        .el-upload-list {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: calc(45% + 30px);
          height: 160px;
          width: calc(100% - 45% - 50px);
          overflow: auto;

          .el-upload-list__item {
            margin-top: 0;
          }
        }
      }
    }
  }
</style>

